<script setup lang="ts">
import { History, InvitationList } from '~comp-b/global-popups/invitation';
import { useList } from '~comp-b/global-popups/invitation/hooks';
import Explain from '~/pages/invitation/components/Explain.vue';
import Lottery from '~/pages/invitation/components/Lottery.vue';

const active = ref(0);
const authed = useAuthed();
const tabs = [History, InvitationList];
const { withdrawAmount, isRs, currency } = useList();
</script>

<template>
  <div v-if="$bp.ltTabletl" class="grid grid-cols-[1fr_auto] gap-7.5 lt-tabletl:grid-cols-1">
    <div v-if="isRs" class="pl-4 text-base text-white font-600 not-italic">
      <template v-if="!authed">
        {{ $t('tgOnIdOv92zGkmwV4j0s', { amount: 10000 }) }}
      </template>
      <template v-else>
        {{ $t('SvwfNN9U2szGEcgRStzN', { amount: `${withdrawAmount} ~ 10000`, currency }) }}
      </template>
    </div>
    <Lottery />
    <div>
      <TCard>
        <ATabs v-model:activeKey="active" class="ant-cover__tabs-invited" centered>
          <ATabPane :key="0" :tab="$t('1EGe4eU2G1Nwu85Z3tE4x')" />
          <ATabPane :key="1" :tab="$t('1DCgt5ZaXm8Ma4CWgyDp')" />
        </ATabs>
        <component :is="tabs[active]" />
      </TCard>
    </div>
    <Explain />
  </div>
</template>

<style lang="scss">
.ant-cover__tabs-invited.ant-tabs {
  .ant-tabs-nav {
    --uno: '!mb0';
  }
  .ant-tabs-nav-wrap {
    .ant-tabs-nav-list {
      --uno: 'flex justify-evenly w-full';
      .ant-tabs-tab {
        --uno: 'flex-1 flex-center';
      }
    }
  }
  .ant-tabs-nav-operations {
    --uno: '!hidden';
  }
}
</style>
